import luckysheetConfigsetting from './luckysheetConfigsetting'
import luckysheetFreezen from './freezen'
import { luckysheetrefreshgrid } from '../global/refresh'
import Store from '../store'
import locale from '../locale/locale'
import sheetmanage from './sheetmanage'
import tooltip from '../global/tooltip'
import { $$, getObjType, camel2split } from '../utils/util'
import { defaultToolbar, toolbarIdMap } from './toolbar'

let gridW = 0,
  gridH = 0

export default function luckysheetsizeauto(isRefreshCanvas = true) {
  if (!luckysheetConfigsetting.showinfobar) {
    Store.infobarHeight = 0
    $('#luckysheet_info_detail').hide()
  } else {
    $('#luckysheet_info_detail').show()
    // Store.infobarHeight = 56;
    Store.infobarHeight = document.querySelector(
      '#luckysheet_info_detail'
    ).offsetHeight
  }

  if (
    !!Store.toobarObject &&
    !!Store.toobarObject.toobarElements &&
    Store.toobarObject.toobarElements.length === 0
  ) {
    $('#' + Store.container)
      .find('.luckysheet-wa-editor')
      .hide()
    Store.toolbarHeight = 0
  } else {
    $('#' + Store.container)
      .find('.luckysheet-wa-editor')
      .show()
    // Store.toolbarHeight = 72;
    Store.toolbarHeight = document.querySelector(
      '#' + Store.container + ' .luckysheet-wa-editor'
    ).offsetHeight
  }

  // if (!luckysheetConfigsetting.showsheetbar) {
  //     $("#" + Store.container).find("#luckysheet-sheet-area").hide();
  //     Store.sheetBarHeight = 0;
  // }
  // else {
  //     $("#" + Store.container).find("#luckysheet-sheet-area").show();
  //     Store.sheetBarHeight = 31;
  // }

  customSheetbarConfig()

  // if (!luckysheetConfigsetting.showstatisticBar) {
  //     $("#" + Store.container).find(".luckysheet-stat-area").hide();
  //     Store.statisticBarHeight = 0;
  // }
  // else {
  //     $("#" + Store.container).find(".luckysheet-stat-area").show();
  //     Store.statisticBarHeight = 23;
  // }

  customStatisticBarConfig()

  // 公式栏
  const formulaEle = document.querySelector(
    '#' + Store.container + ' .luckysheet-wa-calculate'
  )
  if (!luckysheetConfigsetting.sheetFormulaBar) {
    formulaEle.style.display = 'none'
    Store.calculatebarHeight = 0
  } else {
    formulaEle.style.display = 'block'
    Store.calculatebarHeight = formulaEle.offsetHeight
  }

  $('#' + Store.container)
    .find('.luckysheet-grid-container')
    .css(
      'top',
      Store.toolbarHeight + Store.infobarHeight + Store.calculatebarHeight
    )

  gridW = $('#' + Store.container).width()

  if (luckysheetConfigsetting.showConfigWindowResize) {
    //数据透视表  图表  交替颜色 Protection
    if ($('#luckysheet-modal-dialog-slider-pivot').is(':visible')) {
      gridW -= $('#luckysheet-modal-dialog-slider-pivot').outerWidth()
    } else if ($('.chartSetting').is(':visible')) {
      gridW -= $('.chartSetting').outerWidth()
    } else if (
      $('#luckysheet-modal-dialog-slider-alternateformat').is(':visible')
    ) {
      gridW -= $('#luckysheet-modal-dialog-slider-alternateformat').outerWidth()
    }
    if ($('#luckysheet-modal-dialog-slider-protection').is(':visible')) {
      gridW -= $('#luckysheet-modal-dialog-slider-protection').outerWidth()
    }
    if ($('#luckysheet-modal-dialog-slider-dataconfig').is(':visible')) {
      gridW -= $('#luckysheet-modal-dialog-slider-dataconfig').outerWidth()
    }
  }

  const _locale = locale()
  const locale_toolbar = _locale.toolbar
  let ismore = false,
    morebtn = `<div class="luckysheet-toolbar-button luckysheet-inline-block" data-tips="${locale_toolbar.toolMoreTip}" id="luckysheet-icon-morebtn" role="button" style="user-select: none;">
            <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block" style="user-select: none;">
                <div class="luckysheet-toolbar-button-inner-box luckysheet-inline-block" style="user-select: none;">

                    <div class="luckysheet-toolbar-menu-button-caption luckysheet-inline-block" style="user-select: none;">
                        ${locale_toolbar.toolMore}
                    </div>
                    <div class="luckysheet-toolbar-menu-button-dropdown luckysheet-inline-block lksticonfont luckysheet-iconfont-xiayige" style="user-select: none;font-size:12px;">
                    </div>
                </div>
            </div>
         </div>`,
    // Add style left:$$('.luckysheet') left, when the worksheet does not fill the full screen
    morediv =
      '<div id="luckysheet-icon-morebtn-div" class="luckysheet-wa-editor" style="position:absolute;top:' +
      (Store.infobarHeight +
        Store.toolbarHeight +
        $('#' + Store.container).offset().top +
        $('body')
          .first()
          .scrollTop()) +
      'px;right:0px;z-index:3200;padding:5.5px;visibility:hidden;height:auto;white-space:initial;"></div>'

  if ($('#luckysheet-icon-morebtn-div').length == 0) {
    $('body')
      .first()
      .append(morediv)
  }

  // $("#luckysheet-icon-morebtn-div").hide();
  $$('#luckysheet-icon-morebtn-div').style.visibility = 'hidden'
  // $("#luckysheet-icon-morebtn-div > div").appendTo($("#luckysheet-wa-editor"));

  $('#luckysheet-icon-morebtn-div > div').each(function() {
    const $t = $(this)[0]
    const $container = $('#luckysheet-wa-editor')[0]

    $container.appendChild(document.createTextNode(' '))

    $container.appendChild($t)
  })

  $('#luckysheet-icon-morebtn').remove()

  // 所有按钮宽度与元素定位
  const toobarWidths = Store.toobarObject.toobarWidths
  const toobarElements = Store.toobarObject.toobarElements
  let moreButtonIndex = 0

  // When you resize the window during initialization, you will find that the dom has not been rendered yet
  if (toobarWidths == undefined) {
    return
  }
  // 找到应该隐藏的起始元素位置
  for (let index = toobarWidths.length - 1; index >= 0; index--) {
    // #luckysheet-icon-morebtn button width plus right is 83px
    if (toobarWidths[index] < gridW - 90) {
      moreButtonIndex = index
      if (moreButtonIndex < toobarWidths.length - 1) {
        ismore = true
      }
      break
    }
  }
  // 从起始位置开始，后面的元素统一挪到下方隐藏DIV中
  for (let index = moreButtonIndex; index < toobarElements.length; index++) {
    const element = toobarElements[index]
    if (element instanceof Array) {
      for (const ele of element) {
        $('#luckysheet-icon-morebtn-div').append($(`${ele}`))
      }
    } else {
      $('#luckysheet-icon-morebtn-div').append($(`${element}`))
    }
  }

  if (ismore) {
    $('#luckysheet-wa-editor').append(morebtn)
    $('#luckysheet-icon-morebtn').click(function() {
      //When resize, change the width of the more button container in real time
      $$('#luckysheet-icon-morebtn-div').style.left = '' //reset

      // *这里计算containerLeft的作用是：获得容器左侧的margin值，以让点击出现的“更多按钮”栏位置不会出错。
      const containerLeft = $$(`#${Store.container}`).getBoundingClientRect
        ? $$(`#${Store.container}`).getBoundingClientRect().left
        : 0
      const morebtnLeft = $$(
        '#luckysheet-icon-morebtn-div'
      ).getBoundingClientRect().left //get real left info

      if (morebtnLeft < containerLeft) {
        $$('#luckysheet-icon-morebtn-div').style.left = containerLeft + 'px'
      }

      let right =
        $(window).width() -
        $('#luckysheet-icon-morebtn').offset().left -
        $('#luckysheet-icon-morebtn').width() +
        $('body')
          .first()
          .scrollLeft()

      // $("#luckysheet-icon-morebtn-div").toggle().css("right", right < 0 ? 0 : right);

      // use native js operation
      $$('#luckysheet-icon-morebtn-div').style.right =
        right < 0 ? 0 : right + 'px'

      // change to visibility,morebtnLeft will get the actual value
      if ($$('#luckysheet-icon-morebtn-div').style.visibility === 'hidden') {
        $$('#luckysheet-icon-morebtn-div').style.visibility = 'visible'
      } else {
        $$('#luckysheet-icon-morebtn-div').style.visibility = 'hidden'
      }

      let $txt = $(this).find('.luckysheet-toolbar-menu-button-caption')
      if ($txt.text().indexOf(locale_toolbar.toolMore) > -1) {
        const toolCloseHTML = `
                <div class="luckysheet-toolbar-menu-button-caption luckysheet-inline-block" style="user-select: none;">
                    ${locale_toolbar.toolClose}
                </div>
                <div class="luckysheet-toolbar-menu-button-dropdown luckysheet-inline-block lksticonfont  luckysheet-iconfont-shangyige" style="user-select: none;font-size:12px;">
                </div>
                `
        $(this)
          .find('.luckysheet-toolbar-button-inner-box')
          .html(toolCloseHTML)
      } else {
        const toolMoreHTML = `
                <div class="luckysheet-toolbar-menu-button-caption luckysheet-inline-block" style="user-select: none;">
                    ${locale_toolbar.toolMore}
                </div>
                <div class="luckysheet-toolbar-menu-button-dropdown luckysheet-inline-block lksticonfont  luckysheet-iconfont-xiayige" style="user-select: none;font-size:12px;">
                </div>
                `

        $(this)
          .find('.luckysheet-toolbar-button-inner-box')
          .html(toolMoreHTML)
      }
    })
    //$("#luckysheet-wa-editor div").trigger("create");

    // $("#luckysheet-icon-morebtn-div .luckysheet-toolbar-menu-button").css("margin-right", -1);
    // $("#luckysheet-icon-morebtn-div .luckysheet-toolbar-button-split-left").css("margin-right", -3);

    // “更多”容器中，联动hover效果
    $('#luckysheet-icon-morebtn-div .luckysheet-toolbar-button-split-left')
      .off('hover')
      .hover(
        function() {
          $(this)
            .next('.luckysheet-toolbar-button-split-right')
            .addClass('luckysheet-toolbar-button-split-right-hover')
        },
        function() {
          $(this)
            .next('.luckysheet-toolbar-button-split-right')
            .removeClass('luckysheet-toolbar-button-split-right-hover')
        }
      )

    $('#luckysheet-icon-morebtn-div .luckysheet-toolbar-button-split-right')
      .off('hover')
      .hover(
        function() {
          $(this)
            .prev('.luckysheet-toolbar-button-split-left')
            .addClass('luckysheet-toolbar-button-hover')
        },
        function() {
          $(this)
            .prev('.luckysheet-toolbar-button-split-left')
            .removeClass('luckysheet-toolbar-button-hover')
        }
      )

    // tooltip
    tooltip.createHoverTip(
      '#luckysheet-icon-morebtn-div',
      '.luckysheet-toolbar-menu-button, .luckysheet-toolbar-button, .luckysheet-toolbar-combo-button'
    )
  }

  $(
    '#' +
      Store.container +
      ' .luckysheet-wa-editor .luckysheet-toolbar-button-split-left'
  )
    .off('hover')
    .hover(
      function() {
        $(this)
          .next('.luckysheet-toolbar-button-split-right')
          .addClass('luckysheet-toolbar-button-split-right-hover')
      },
      function() {
        $(this)
          .next('.luckysheet-toolbar-button-split-right')
          .removeClass('luckysheet-toolbar-button-split-right-hover')
      }
    )

  $(
    '#' +
      Store.container +
      ' .luckysheet-wa-editor .luckysheet-toolbar-button-split-right'
  )
    .off('hover')
    .hover(
      function() {
        $(this)
          .prev('.luckysheet-toolbar-button-split-left')
          .addClass('luckysheet-toolbar-button-hover')
      },
      function() {
        $(this)
          .prev('.luckysheet-toolbar-button-split-left')
          .removeClass('luckysheet-toolbar-button-hover')
      }
    )

  // When adding elements to the luckysheet-icon-morebtn-div element of the toolbar, it will affect the height of the entire workbook area, so the height is obtained here
  gridH = $('#' + Store.container).height()

  $('#' + Store.container)
    .find('.luckysheet')
    .height(gridH - 2)
    .width(gridW - 2)

  changeSheetContainerSize(gridW, gridH)

  if (isRefreshCanvas) {
    luckysheetrefreshgrid(
      $('#luckysheet-cell-main').scrollLeft(),
      $('#luckysheet-cell-main').scrollTop()
    )
  }

  sheetmanage.sheetArrowShowAndHide()
  sheetmanage.sheetBarShowAndHide()
}

export function changeSheetContainerSize(gridW, gridH) {
  if (gridW == null) {
    gridW = $('#' + Store.container).width()
  }

  if (gridH == null) {
    gridH = $('#' + Store.container).height()
  }
  Store.cellmainHeight =
    gridH -
    (Store.infobarHeight +
      Store.toolbarHeight +
      Store.calculatebarHeight +
      Store.columnHeaderHeight +
      Store.sheetBarHeight +
      Store.statisticBarHeight)
  Store.cellmainWidth = gridW - Store.rowHeaderWidth

  $('#luckysheet-cols-h-c, #luckysheet-cell-main').width(Store.cellmainWidth)
  $('#luckysheet-cell-main').height(Store.cellmainHeight)
  $('#luckysheet-rows-h').height(
    Store.cellmainHeight - Store.cellMainSrollBarSize
  )

  $('#luckysheet-scrollbar-y').height(
    Store.cellmainHeight +
      Store.columnHeaderHeight -
      Store.cellMainSrollBarSize -
      3
  )
  $('#luckysheet-scrollbar-x').height(Store.cellMainSrollBarSize)
  $('#luckysheet-scrollbar-y').width(Store.cellMainSrollBarSize)

  $('#luckysheet-scrollbar-x')
    .width(Store.cellmainWidth)
    .css('left', Store.rowHeaderWidth - 2)

  Store.luckysheetTableContentHW = [
    Store.cellmainWidth + Store.rowHeaderWidth - Store.cellMainSrollBarSize,
    Store.cellmainHeight +
      Store.columnHeaderHeight -
      Store.cellMainSrollBarSize,
  ]

  $('#luckysheetTableContent, #luckysheetTableContentF')
    .attr({
      width: Math.ceil(
        Store.luckysheetTableContentHW[0] * Store.devicePixelRatio
      ),
      height: Math.ceil(
        Store.luckysheetTableContentHW[1] * Store.devicePixelRatio
      ),
    })
    .css({
      width: Store.luckysheetTableContentHW[0],
      height: Store.luckysheetTableContentHW[1],
    })

  $('#' + Store.container)
    .find('#luckysheet-grid-window-1')
    .css('bottom', Store.sheetBarHeight)
  $('#' + Store.container)
    .find('.luckysheet-grid-window')
    .css('bottom', Store.statisticBarHeight)

  let gridwidth = $('#luckysheet-grid-window-1').width()
  $('#luckysheet-freezebar-horizontal')
    .find('.luckysheet-freezebar-horizontal-handle')
    .css({ width: gridwidth - 10 })
    .end()
    .find('.luckysheet-freezebar-horizontal-drop')
    .css({ width: gridwidth - 10 })

  let gridheight = $('#luckysheet-grid-window-1').height()
  $('#luckysheet-freezebar-vertical')
    .find('.luckysheet-freezebar-vertical-handle')
    .css({ height: gridheight - 10 })
    .end()
    .find('.luckysheet-freezebar-vertical-drop')
    .css({ height: gridheight - 10 })

  luckysheetFreezen.createAssistCanvas()
}

/**
 *
 *
 * Toolbar judgment rules: First set the display and hide of all tool buttons according to showtoolbar, and then override the judgment of showtoolbar according to showtoolbarConfig rules
 *
 * The width value of each button in the statistics toolbar is used to calculate which needs to be placed in more buttons
 */
export function menuToolBarWidth() {
  const showtoolbar = luckysheetConfigsetting.showtoolbar
  const showtoolbarConfig = luckysheetConfigsetting.showtoolbarConfig

  const toobarWidths = (Store.toobarObject.toobarWidths = [])
  const toobarElements = (Store.toobarObject.toobarElements = [])
  const toolbarConfig = (Store.toobarObject.toolbarConfig = buildBoolBarConfig())

  /**
   * 基于 showtoolbarConfig 配置 动态生成 toolbarConfig
   * @returns {object}
   * @input showtoolbarConfig = ['undo', 'redo', '|' , 'font' , 'moreFormats', '|']
   * {
   *     undo: {ele: '#luckysheet-icon-undo', index: 0},
   *     redo: {ele: ['#luckysheet-icon-redo', '#luckysheet-separator-redo'], index: 1},
   *     undo: {ele: '#luckysheet-icon-font', index: 2},
   *     moreFormats: {ele: ['#luckysheet-icon-fmt-other', '#luckysheet-separator-more-formats'], index: 3},
   * }
   */
  function buildBoolBarConfig() {
    let obj = {}
    function array2Config(arr) {
      const obj = {}
      let current, next
      let index = 0
      for (let i = 0; i < arr.length; i++) {
        current = arr[i]
        next = arr[i + 1]
        if (current !== '|') {
          obj[current] = {
            ele: toolbarIdMap[current],
            index: index++,
          }
        }
        if (next === '|') {
          if (getObjType(obj[current].ele) === 'array') {
            obj[current].ele.push(`#toolbar-separator-${camel2split(current)}`)
          } else {
            obj[current].ele = [
              obj[current].ele,
              `#toolbar-separator-${camel2split(current)}`,
            ]
          }
        }
      }
      return obj
    }
    // 数组形式直接生成
    if (getObjType(showtoolbarConfig) === 'array') {
      // show 为 false
      if (!showtoolbar) {
        return obj
      }
      return array2Config(showtoolbarConfig)
    }
    // 否则为全部中从记录中挑选显示或隐藏
    const config = defaultToolbar.reduce(function(total, curr) {
      if (curr !== '|') {
        total[curr] = true
      }
      return total
    }, {})
    if (!showtoolbar) {
      for (let s in config) {
        config[s] = false
      }
    }

    if (JSON.stringify(showtoolbarConfig) !== '{}') {
      if (showtoolbarConfig.hasOwnProperty('undoRedo')) {
        config.undo = config.redo = showtoolbarConfig.undoRedo
      }
      Object.assign(config, showtoolbarConfig)

      let current, next
      let index = 0
      for (let i = 0; i < defaultToolbar.length; i++) {
        current = defaultToolbar[i]
        next = defaultToolbar[i + 1]
        if (config[current] === false) {
          continue
        }
        if (current !== '|' && config[current]) {
          obj[current] = {
            ele: toolbarIdMap[current],
            index: index++,
          }
        }
        if (next === '|') {
          if (getObjType(obj[current].ele) === 'array') {
            obj[current].ele.push(`#toolbar-separator-${camel2split(current)}`)
          } else {
            obj[current].ele = [
              obj[current].ele,
              `#toolbar-separator-${camel2split(current)}`,
            ]
          }
        }
      }
    } else {
      obj = showtoolbar ? array2Config(defaultToolbar) : {}
    }

    return obj
  }

  for (let s in toolbarConfig) {
    if (Object.prototype.hasOwnProperty.call(toolbarConfig, s)) {
      toobarElements.push($.extend(true, {}, toolbarConfig[s]))
    }
  }

  toobarElements.sort(sortToolbar)

  function sortToolbar(a, b) {
    if (a.index > b.index) {
      return 1
    } else {
      return -1
    }
  }
  toobarElements.forEach((curr, index, arr) => {
    arr[index] = curr.ele

    if (index !== toobarElements.length - 1) {
      if (curr.ele instanceof Array) {
        toobarWidths.push($(curr.ele[0]).offset().left)
      } else {
        toobarWidths.push($(curr.ele).offset().left)
      }
    } else {
      if (curr.ele instanceof Array) {
        toobarWidths.push($(curr.ele[0]).offset().left)
        toobarWidths.push(
          $(curr.ele[0]).offset().left + $(curr.ele[0]).outerWidth() + 5
        )
      } else {
        toobarWidths.push($(curr.ele).offset().left)
        toobarWidths.push(
          $(curr.ele).offset().left + $(curr.ele).outerWidth() + 5
        )
      }
    }
  })

  //If the container does not occupy the full screen, we need to subtract the left margin
  const containerLeft = $('#' + Store.container).offset().left
  toobarWidths.forEach((item, i) => {
    toobarWidths[i] -= containerLeft
  })
}

/**
 *Custom configuration bottom sheet button
 */
function customSheetbarConfig() {
  if (!luckysheetConfigsetting.initShowsheetbarConfig) {
    luckysheetConfigsetting.initShowsheetbarConfig = true

    const config = {
      add: false, //Add worksheet
      menu: true, //Worksheet management menu
      sheet: true, //Worksheet display
    }

    if (!luckysheetConfigsetting.showsheetbar) {
      for (let s in config) {
        config[s] = false
      }
    }

    // showsheetbarConfig determines the final result
    if (JSON.stringify(luckysheetConfigsetting.showsheetbarConfig) !== '{}') {
      Object.assign(config, luckysheetConfigsetting.showsheetbarConfig)
    }

    luckysheetConfigsetting.showsheetbarConfig = config
  }

  const config = luckysheetConfigsetting.showsheetbarConfig

  let isHide = 0

  for (let s in config) {
    if (!config[s]) {
      switch (s) {
        case 'add':
          $('#luckysheet-sheets-add').hide()
          isHide++
          break

        case 'menu':
          $('#luckysheet-sheets-m').hide()
          isHide++
          break

        case 'sheet':
          $('#luckysheet-sheet-container').hide()
          $('#luckysheet-sheets-leftscroll').hide()
          $('#luckysheet-sheets-rightscroll').hide()
          isHide++
          break

        default:
          break
      }
    }
  }

  if (isHide === 3) {
    $('#' + Store.container)
      .find('#luckysheet-sheet-area')
      .hide()
    Store.sheetBarHeight = 0
  } else {
    $('#' + Store.container)
      .find('#luckysheet-sheet-area')
      .show()
    Store.sheetBarHeight = 31
  }
}

/**
 * Customize the bottom count bar
 */
function customStatisticBarConfig() {
  if (!luckysheetConfigsetting.initStatisticBarConfig) {
    luckysheetConfigsetting.initStatisticBarConfig = true

    const config = {
      count: true, // Count bar
      view: true, // print view
      zoom: true, // Zoom
    }

    if (!luckysheetConfigsetting.showstatisticBar) {
      for (let s in config) {
        config[s] = false
      }
    }

    // showstatisticBarConfig determines the final result
    if (
      JSON.stringify(luckysheetConfigsetting.showstatisticBarConfig) !== '{}'
    ) {
      Object.assign(config, luckysheetConfigsetting.showstatisticBarConfig)
    }

    luckysheetConfigsetting.showstatisticBarConfig = config
  }

  const config = luckysheetConfigsetting.showstatisticBarConfig

  let isHide = 0

  for (let s in config) {
    if (!config[s]) {
      switch (s) {
        case 'count':
          $('#luckysheet-sta-content').hide()
          isHide++
          break

        case 'view':
          $('.luckysheet-print-viewList').hide()
          isHide++
          break

        case 'zoom':
          $('#luckysheet-zoom-content').hide()
          isHide++
          break

        default:
          break
      }
    }
  }

  if (isHide === 3) {
    $('#' + Store.container)
      .find('.luckysheet-stat-area')
      .hide()
    Store.statisticBarHeight = 0
  } else {
    $('#' + Store.container)
      .find('.luckysheet-stat-area')
      .show()
    Store.statisticBarHeight = 23
  }
}
